import './index.scss'
import { NavLink } from 'react-router-dom'
import { useState } from 'react'

const HeaderNav = () => {
  const [hideNav, setHideNav] = useState(false)
  return (
    <div className={`index-header ${hideNav ? 'hide-nav' : ''}`}>
      <nav className='header-nav-wrap'>
        <div className='header-nav'>
          <NavLink to='/' className='header-website'><h2 className='singh-home'>Singh1995.com</h2></NavLink>
          <div className='nav-list'>
            <NavLink className={({ isActive }) =>
              isActive ? 'nav-list-item nav-active' : 'nav-list-item'
            } to='/'><span>首页</span></NavLink>
             <NavLink className={({ isActive }) =>
              isActive ? 'nav-list-item nav-active' : 'nav-list-item'
            } to='/canvas-cource'><span>Canvas教程</span></NavLink>
             <NavLink className={({ isActive }) =>
              isActive ? 'nav-list-item nav-active' : 'nav-list-item'
            } to='/math'><span>前端开发与数学</span></NavLink>
             <NavLink className={({ isActive }) =>
              isActive ? 'nav-list-item nav-active' : 'nav-list-item'
            } to='/sundry'><span>杂项随笔文章</span></NavLink>
          </div>
        </div>      
      </nav>
      <div className='nav-switch' onClick={() => setHideNav(!hideNav)}>
        <i className='iconfont icon-chilun'></i>
      </div>
    </div>
  )
}

export default HeaderNav